<script setup>


import ChatService from "@/service/impl/ChatService.js";
import {nextTick} from "vue";



const list = ref([])
const emit = defineEmits(['onSelect'])

const init = (item) => {
    ChatService.modeContentList({}).then(res => {
        list.value = res.data
        nextTick(() => {
            selectClass(item)
        })
    })
}
const onSelect = (item) => {
    emit('onSelect',item)
    selectClass(item)
}
const onClose = (item,idx) => {
    ChatService.modeContentDel({
        id: item.id
    }).then(res => {
        // 根据下标删除list元素
        list.value.splice(idx,1)
        emit('onClose',item)
        let doc = document.getElementById(`select_${item.id}`)
        doc.classList.remove('select')
    })
}

const selectClass = (item) => {
    const boxes = document.querySelectorAll('.list-item');
    boxes.forEach(box => {
        box.classList.remove('select')
    });
    let doc = document.getElementById(`select_${item.id}`)
    doc.classList.add('select')
}

defineExpose({
    init,
    onClose
})

</script>

<template>
    <el-row class="list">
        <template v-for="(item,index) in list" :key="index">
            <el-row class="list-item" :id="`select_${item.id}`"  @click.stop="onSelect(item)">
                <el-row class="list-item-content">
                    {{item.name}}
                </el-row>
                <el-row class="list-item-tag">
                    <el-col :span="12"><el-tag type="primary" disable-transitions>{{item.chatName}}</el-tag></el-col>
                    <el-col :span="12" class="list-item-tag-item">
                        <el-icon @click.stop="onClose(item,index)"><Close /></el-icon>
                    </el-col>
                </el-row>
            </el-row>
        </template>
    </el-row>
</template>

<style scoped lang="scss">
.list{
    width: 100%;
    height: 100%;
    display: flex;
    align-content: start;

    .list-item{
        user-select: none;
        width: 100%;
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid var(--el-menu-border-color);
        cursor: pointer;

        .list-item-content{
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            font-size: 14px;
            text-overflow: ellipsis;
        }
        .list-item-tag{
            width: 100%;
            font-size: 13px;
            margin-top: 5px;

            .list-item-tag-item{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: end;
            }
        }
    }
}
.select{
    border: 1px solid var(--el-color-primary) !important;
}
</style>